---
title:  svg速查
author: ajn404
pubDatetime: 2023-09-07T02:43:53Z
postSlug: svg
featured: false
draft: false
tags:
  - svg
description:
  "svg some features"
---

## tags


- [animateTransform](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/animateTransform)

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  style="fill:#996611"
  version="1.1">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0 60 70"
      to="360 60 70"
      dur="10s"
      repeatCount="indefinite" />
  </polygon>
</svg>


```html
<animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0 60 70"
      to="360 60 70"
      dur="10s"
      repeatCount="indefinite" />
```


## attribute
- [transform](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/transform)

<svg
  viewBox="-40 0 150 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g
    fill="grey"
    transform="rotate(-10 50 100)
                translate(-36 45.5)
                skewX(40)
                scale(1.2 0.5)">
    <path
      id="heart"
      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>
</svg>

## 效果

- 简单投影
```html
<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
      <feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"></rect>
</svg>
```
<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
      <feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"></rect>
</svg>
> [blend-mode](https://developer.mozilla.org/zh-CN/docs/Web/CSS/blend-mode)

<div class="border-10 w-full h-[20px] bg-gradient-to-r from-cyan-500 to-blue-500"/>



- 颜色变换(高斯模糊)
> feGaussianBlur/feColorMatrix/feOffset/feBlend 

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
      <feColorMatrix 
      result="matrixOut" 
      in="offOut" 
      type="matrix" 
      values="      0.2 0 0 0       
                    0 0 0.2 0 0      
                    0 0 0 0.2 0       
                    0 0 0 0 1 0">
      </feColorMatrix>
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="#8855ee" filter="url(#f4)"></rect>
</svg>

- svg实现线性渐变

import CustomerSvg from '@components/react/d3/svg.tsx'

<CustomerSvg type='linear' client:load/>

```tsx
<svg height="150" width="400">
                <defs>
                    <linearGradient id="grad1" x1={x1 + '%'} y1={y1 + '%'} x2={x2 + '%'} y2={y2 + '%'}>
                        <stop offset="0%" style={{ stopColor: "rgb(255,255,0)", stopOpacity: 1 }}></stop>
                        <stop offset="100%" style={{ stopColor: "rgb(255,0,0)", stopOpacity: 1 }}></stop>
                    </linearGradient>
                </defs>
                <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
            </svg>
```



## 链接

- [mdn svg](https://developer.mozilla.org/zh-CN/docs/Web/SVG)
